<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翱翔留言板</title>
    <link rel="stylesheet" href="/static/w3/css/index.css">
</head>
<body>
<div class="container">
    <div class="title">
        <h3>翱翔留言板</h3>
        <span class="weather">北京 雷阵雨转小雨</span>
    </div>

    <div class="form-group">
        <input id="user" type="text" class="form-control" placeholder="请输入昵称">
    </div>
    <div class="form-group">
        <textarea id="text" class="form-control" cols="30" rows="8" placeholder="请输入留言信息..."></textarea>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>

    <div class="messages">
        <div class="title">
            最新留言(5)
        </div>
        <div class="list">
            <div class="message">
                <div class="box">
                    <img src="/static/w3/images/1.webp" alt="">
                    <div class="item">
                        <div class="user">张三</div>
                        <div class="content">今儿天气不错</div>
                    </div>
                </div>
                <span class="time">5秒前</span>
                <span class="close">X</span>
            </div>

            <!-- <div class="message">
               <div class="box">
                 <img src="/static/w3/images/2.webp" alt="">
                 <div class="item">
                   <div class="user">凤姐</div>
                   <div class="content">今儿天气不错</div>
                 </div>
               </div>
               <span class="time">1分钟前</span>
               <span class="close">X</span>
             </div>-->
        </div>
    </div>
</div>
<!--格式化时间函数,使用第三方库-->
<script src="/static/w3/scripts/lib/dayjs.js"></script>
<script>
    //存储所有的留言数据
    let messages=[
        /*{
          name:'张三',
          icon:'/static/w3/images/2.webp',
          time:'2022-08-23 12:12:12',
          text:'天气不错'
        },
        {
          name:'凤姐',
          icon:'/static/w3/images/2.webp',
          time:'2022-08-23 12:12:12',
          text:'天气不错'
        },*/
    ];
    function loadMsgs() {
        //1.更改最新留言条数
        let title=document.querySelector(".messages .title");
        title.textContent=`最新留言（${messages.length}）`;
        //2.动态渲染留言列表
        let html='';
        for(let i=0;i<messages.length;i++){
            let msg=`
        <div class="message">
          <div class="box">
            <img src="${messages[i].icon}" alt="">
            <div class="item">
              <div class="user">${messages[i].name}</div>
              <div class="content">${messages[i].text}</div>
            </div>
          </div>
          <span class="time">${dayjs(messages[i].time).format("YYYY-MM-DD HH:mm:ss")}</span>
          <span class="close">X</span>
        </div>`
            ;
            html=html+msg;
        }
        //获取存储信息列表的list
        let list=document.querySelector('.list');
        list.innerHTML=html;

        //在列表渲染完毕之后，获取所有的关闭按钮，注册点击事件
        //4.删除留言
        let btns=document.querySelectorAll(".close");
        for(let i=0;i<btns.length;i++){
            btns[i].onclick=function (){
                //此处的i就是当前留言，对应的数组索引
                //根据索引从数组中删除元素
                messages.splice(i,1);
                //重新加载列表
                loadMsgs();
            }
        }
    }
    //渲染留言列表
    loadMsgs()

    //3.发送留言

    //获取按钮，给按钮注册点击事件
    let btn=document.querySelector(".btn");
    btn.onclick=function (){
        //获取文本框中输入的内容，获取到的是don对象dom.value
        let user=document.querySelector("#user");
        let text=document.querySelector("#text");

        console.log(user.value);
        //往数组中添加元素，可以使用push方法
        messages.push({
            name:user.value,
            icon:"/static/w3/images/2.webp",
            text:text.value,
            time:new Date()
        });
        //重新加载列表
        loadMsgs()
        //清空文本框
        user.value='';
        text.value='';
    }




</script>
</body>
</html>